<template>
	<div class="goods_one">
		<div class="goods-list"
			id="goods-list"
		>
		<transition-group name="list">
			<div class="good border-1px"
				v-for="(goods, index) in goodsList"
				@click="goDetail(goods)"
				:key="index"
			>
				<div class="goods-left">
					<img :src="goods.image" 
						lazy="loaded"
						v-if="pagetype ==1 || pagetype == 2"
					/>
					<img :src="goods.image + '_310x310.jpg'" 
						lazy="loaded"
						v-if="pagetype != 1 && pagetype != 2"
					/>
					<div class="goods-left-tips" v-if="goods.fan_price" :style="{backgroundImage: 'linear-gradient(to right, rgb(79, 92, 104), rgb(42, 62, 69))',background: 'linear-gradient(to right,rgba(0,0,0,0) 0%,'+ colorMid + ' 50%,rgba(0,0,0,0) 100%)'}">
						<p>分享赚{{goods.fan_price}}</p>
					</div>
				</div>
				<div class="goods-right">
					<p class="two-line"><span class="TBimg" v-show="goods.is_tmall == 0"></span><span class="TMimg" v-show="goods.is_tmall == 1"></span><span class="JDimg" v-show="goodsType == 1"></span><span class="PDDimg" v-show="goodsType == 2"></span>{{goods.title}}</p>
					<div class="gr-sale">
						<p>原价：<span>￥{{goods.origin_price}}</span></p>
						<p v-if="pagetype != 1">{{goods.sales_num}}人已买</p>
					</div>
					<div class="gr-price">
						<div class="gr-price-left">
							<i class="icon" :style="{backgroundImage: 'linear-gradient(to right, rgb(79, 92, 104), rgb(42, 62, 69))',background: 'linear-gradient(to right,' + colorLeft + ',' + colorRight + ')'}">券后价</i>
							<label><span>￥</span>{{goods.coupon_price}}</label>
						</div>
						<div class="gr-price-right" :style="{backgroundImage: 'linear-gradient(to right, rgb(79, 92, 104), rgb(42, 62, 69))',background: 'linear-gradient(to right,' + colorLeft + ',' + colorRight + ')'}">
							{{goods.quan_price}}元券
							<div class="dotl"></div>
							<div class="dotr"></div>
						</div>
					</div>
				</div>
			</div>
		</transition-group>
			<div class="goods-none"
				v-if="this.goodsList.length === 0"
			>
				<img src="../assets/img/nodata.png" />
			</div>
		</div>
	</div>
</template>
<script>
	import { Toast } from 'mint-ui'
	import axios from 'axios'
	import Http from '../http.js'
	export default{
		props: {
			goodsList: {
				type: Array
			},
			goodsType: {
				type: String
			},
			mobile: {
				type: String
			}
		},
		data(){
			return{
				pagetype: this.goodsType || 3,
				colorLeft: window.localStorage.getItem("left"), 
				colorRight: window.localStorage.getItem("right"), 
				colorMid: window.localStorage.getItem("mid"), 
				token: window.localStorage.getItem("token"),
				wx_login: window.localStorage.getItem("wx_login")
			}
		},
		mounted(){

		},
		methods: {
			goDetail: function(goods){
				if (!this.token) {
					if (this.wx_login == 1) {
						this.$router.push('/auther')
					}else{
						this.$router.push('/login')
					}					
				}else if (this.token && this.mobile == '') {
					this.$router.push('/bind/phone')
				}else{
					if ( goods.is_tmall == 1) {
						this.pagetype = 1;
						this.$router.push({
							path: '/product/detail/' + goods.origin_id,
							query: {
								type: this.pagetype,
		                        is_collect: goods.is_collect,
		                        image: goods.image,
		                        title: goods.title,
		                        coupon_price: goods.coupon_price,
		                        origin_price: goods.origin_price,
		                        quan_price: goods.quan_price,
		                        sub_title: goods.sub_title,
		                        quan_time: goods.quan_time,
							}
						})					
					} else if ( goods.is_tmall == 0 ){
						this.pagetype = 2;
						this.$router.push({
							path: '/product/detail/' + goods.origin_id,
							query: {
								type: this.pagetype,
		                        is_collect: goods.is_collect,
		                        image: goods.image,
		                        title: goods.title,
		                        coupon_price: goods.coupon_price,
		                        origin_price: goods.origin_price,
		                        quan_price: goods.quan_price,
		                        sub_title: goods.sub_title,
		                        quan_time: goods.quan_time,
							}
						})
					}else if (this.goodsType == 1) {
	            		this.$router.push({
							path: '/product/detail/' + goods.origin_id,
							query: {
								type: 3,
		                        is_collect: goods.is_collect,
		                        image: goods.image,
		                        title: goods.title,
		                        coupon_price: goods.coupon_price,
		                        origin_price: goods.origin_price,
		                        quan_price: goods.quan_price,
		                        fan_price: goods.fan_price,
		                        quan_time: goods.quan_time,
							}
						})
	            	}else if(this.goodsType == 2){
	            		this.$router.push({
							path: '/product/detail/' + goods.origin_id,
							query: {
								type: 4,
		                        is_collect: goods.is_collect,
		                        image: goods.image,
		                        title: goods.title,
		                        coupon_price: goods.coupon_price,
		                        origin_price: goods.origin_price,
		                        quan_price: goods.quan_price,
		                        quan_time: goods.quan_time,
		                        fan_price: goods.fan_price,
							}
						})
	            	}
				}				
			},
		}
	}
</script>
<style lang="scss" scoped>
	.goods_one{
		@import '../assets/common/common.scss'
	}
</style>